import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import MainBody from './style'
import { getDiscountInfo, getGoodPrice,getHighScore, getHotrecommend, getLongfor, getPlus } from '@/store/modules/homeSlice'
import RoomListV1 from './c-cpns/room-list-v1/index'
import RoomListV2 from './c-cpns/room-list-v2/index'
import RoomListV3 from './c-cpns/room-list-v3/index'
import RoomListTab from './c-cpns/room-list-tabs/index'
function Index() {
  const dispatch = useDispatch();
  // 发送高性价比模块的网络请求
  useEffect(() => {
    dispatch(getGoodPrice());
    dispatch(getHighScore())
    dispatch(getDiscountInfo())
    dispatch(getHotrecommend())
    dispatch(getLongfor());
    dispatch(getPlus())
  }, [dispatch])
  // 映射redux中的数据
  const { goodPriceInfo,HighScoreInfo,DiscountInfo,Hotrecommend,Longfor,Plus } = useSelector((state) => ({
    goodPriceInfo: state.home.homeGoodPriceInfo,
    HighScoreInfo:state.home.HighScoreInfo,
    DiscountInfo:state.home.DiscountInfo,
    Hotrecommend:state.home.HotrecommendInfo,
    Longfor:state.home.LongforInfo,
    Plus:state.home.PlusInfo
  }))
  // useEffect(()=>{
  //  console.log(Plus,'data'); 
  // })
  return (
    <MainBody>
      {/* 1.首屏大图 */}
      <img src={require('../../assets/img/bg.jpg')} alt="" />
      <div className="mainBody">
      <RoomListV2 DiscountInfo={Hotrecommend}></RoomListV2>
      <RoomListV2 DiscountInfo={DiscountInfo}></RoomListV2>
      <RoomListTab Longfor={Longfor} ></RoomListTab>
      <RoomListV3 goodPriceInfo={Plus}></RoomListV3>
      <RoomListV1 goodPriceInfo={goodPriceInfo}></RoomListV1>
      <RoomListV1 goodPriceInfo={HighScoreInfo}></RoomListV1>
      </div>
 
    </MainBody>
  )
}

export default Index